<template>
	<view class="master-income-record" v-if="isLoad">
		<view class="mine-menu-list c-base" :style="{background:primaryColor}">
			<view class="space-lg"></view>
			<view class="space-lg"></view>
			<view class="flex-center f-caption mt-sm mb-sm">当前剩余额度(元)</view>
			<view class="money-info flex-center flex-y-baseline">¥<view class="money">{{detail.quota}}
				</view>
			</view>
			<view class="space-md"></view>
			<view class="space-lg"></view>
		</view>
		<view class="pt-lg pb-md pl-lg pr-lg">增加额度（元）</view>
		<view class="fill-base flex-between flex-warp pl-lg pr-lg">
			<block v-for="(item,index) in list" :key="index">
				<view class="p-item flex-center radius-16 mb-md f-title text-bold" @tap="changeMoney(item)"
				:style="{background:item == param.money ? primaryColor : '#f5f5f5',color: item == param.money ? '#fff' : '#333'}">{{item}}</view>
			</block>
		</view>

		<view class="space-max-footer"></view>
		<fix-bottom-button @confirm="onSubmit"
			:text="[{text:'提交申请',type:'confirm'}]" bgColor="#fff" borderRadius="10rpx">
		</fix-bottom-button>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				detail: {},
				isLoad: false,
				param: {
					money: ''
				},
				list: ['500','1000','1500','2000','2500','3000'],
				loading: true,
				lockTap: false,
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo
		}),
		async onLoad(options) {
			this.options = options
			this.$util.showLoading()
			await this.initIndex()
			this.isLoad = true
		},
		methods: {
			...mapActions(['getConfigInfo']),
			async initIndex(refresh = false) {
				if(!this.configInfo.id || refresh){
					await this.getConfigInfo()
				}
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				let {
					detail
				} = await this.$util.getPage(-1)
				this.detail = detail
				this.$util.hideAll()
			},
			changeMoney(data){
				this.param.money = data
			},
			async onSubmit(){
				if(!this.param.money){
					this.$util.showToast({
						title: `请选择增加额度`
					})
					return
				}
				if(this.lockTap){
					return
				}
				this.lockTap = true
				this.$util.showLoading()
				await this.$api.user.applyQuota(this.param)
				this.$util.hideAll()
				this.$util.showToast({
				 	title: `申请成功`
				})
				this.lockTap = false
				setTimeout(()=>{
					this.$util.back()
					this.$util.goUrl({url: 1 ,openType: 'navigateBack'})
				},1500)
			}
		}
	}
</script>


<style lang="scss">
	page{
		background: #fff;
	}
	.master-income-record {

		.mine-menu-list {

			.money-info {
				font-size: 50rpx;

				.money {
					font-size: 70rpx;
				}
			}

		}

		.p-item{
			height: 120rpx;
			width: calc((100% - 40rpx) / 3);
		}
	}
</style>
